<template>
	<view>
		<view>
			<uni-section title="滑动视图" type="line" padding>
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper class="swiper" :indicator-dots="true">
					<swiper-item>
						<uni-grid :column="3" :highlight="true" @change="change">
							<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
								<view class="grid-item-box" @click="tz(item.essay.eid)">
									<image :src="item.essay.picture" class="image" mode="aspectFill" />
									<text class="text">{{ item.essay.title }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		created() {
			this.queryIsCollect();
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
				
			},
			tz(id){
				uni.navigateTo({
					url: '/pages/bookDetail/bookDetail?id=' + id,
				})
			},
			queryIsCollect(){
				uni.request({
					url: 'http://127.0.0.1:800/mhs/read/queryIsCollect', //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.list = res.data.data;
						console.log(this.list);
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 31vw;
		height: 13vh;
		object-fit: cover;
		// flex: 1;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>

